<template>
    <ele-modal width="880px" :visible="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" :title="isUpdate ? '修改用户' : '添加代理'" @update:visible="updateVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <div v-if='isUpdate'>
                <el-row :gutter="15">
                    <el-col :md="12" :sm="12" :xs="24">
                        <el-form-item label="用户名" prop="nickName">
                            <el-input clearable v-model="form.nickName" placeholder="请输入用户名" />
                        </el-form-item>
                    </el-col>
                    <el-col :md="12" :sm="12" :xs="24">
                        <el-form-item label="金额" prop="gold">
                            <el-input clearable type="number" v-model="form.gold" placeholder="请输入金额" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :md="12" :sm="12" :xs="24">
                        <el-form-item label="状态" prop="status">
                            <el-select clearable class="ele-block" v-model="form.status" placeholder="请选择状态"
                                style='width: 100%;'>
                                <el-option label="冻结" :value="0" />
                                <el-option label="正常" :value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12" :sm="12" :xs="24">
                        <el-form-item label="VIP到期时间" prop="vipTime">
                            <el-date-picker v-model="form.vipTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd" style='width: 100%;'>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :md="12" :sm="12" :xs="24">
                        <el-form-item label="手机号" prop="phone">
                            <el-input clearable type="number" v-model="form.phone" placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div v-else>
                <el-row :gutter="15">
                    <el-col :md="24" :sm="24" :xs="24">
                        <el-form-item label="用户ID:" prop="id">
                            {{ form.id }}
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :sm="24" :xs="24">
                        <el-form-item label="代理等级:" prop="actingNum">
                            <el-select clearable class="ele-block" v-model="form.actingNum" placeholder="请选择代理级别"
                                style="width: 100%;">
                                <el-option label="无代理" :value="0" />
                                <el-option label="一级代理" :value="1" />
                                <el-option label="二级代理" :value="2" />
                                <el-option label="总代理" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>
    </ele-modal>
</template>

<script>
import { updateUser } from "@/api/userList";
import { addActing } from "@/api/actingList";

export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            nickName: undefined,
            gold: 0,
            vipTime: undefined,
            phone: undefined,
            status: undefined,
            _id: undefined,
            id: undefined,
            actingNum: undefined,
        };
        return {
            defaultForm,
            form: { ...defaultForm },
            // 日期选择器选项
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            // 表单验证规则
            rules: {
                nickName: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                gold: [
                    {
                        required: true,
                        message: '请输入金额',
                        trigger: 'blur'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: '请选择状态',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                ],
                actingNum: [
                    {
                        required: true,
                        message: '请选择代理等级',
                        trigger: 'blur'
                    }
                ],
            },
            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false
        };
    },
    watch: {
        visible(visible) {
            if (visible) {
                if (this.data) {
                    this.data.vipTime=this.data.vipTime?this.data.vipTime:''
                    this.$util.assignObject(this.form, { ...this.data });
                    this.isUpdate = this.data.nickName && this.data.createTime ? true : false;
                } else {
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    },
    methods: {
        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.loading = true;
                const data = {
                    ...this.form
                };

                const saveOrUpdate = this.isUpdate ? updateUser : addActing;
                saveOrUpdate(data)
                    .then((res) => {
                        this.loading = false;
                        this.$message.success('保存成功');
                        this.updateVisible(false);
                        this.$emit('done');
                    })
                    .catch((msg) => {
                        this.loading = false;
                        this.$message.error(msg);
                    });
            });
        },

        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        }
    }
};
</script>

<style lang="scss" scoped></style>